<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kafka 组信息管理</title>
    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />

    <link rel="stylesheet" href="../../plugins/icheck/custom.css" />
    <style>
        .list-group-item.group {
            cursor: pointer;
        }
        .admin-class{
            cursor: pointer;
        }
        .admin-class:hover{
            text-decoration: underline;
        }
        .form-group-sm select.form-control {
            line-height: inherit;
        }
    </style>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" id="brokers"></a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="panel panel-default ">
        <div class="panel-heading">设置区
            <span id="admin" class="pull-right padding-right text-success admin-class" target="_blank">topic 管理</span>
        </div>
        <div class="panel-body">
            <div class="col-xs-9 ">
                <div class="input-group input-group-sm">
                    <div class="input-group-btn" id="connect">
                        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                            <span></span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                        </ul>
                    </div>
                    <input class="form-control" name="connect" disabled/>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="button-group ">
                    <button id="newconnbtn" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> 新连接</button>
                    <button id="thirdpart" class="btn btn-success btn-sm"><i class="fa fa-cogs"></i> 设置监控地址</button>
                    <button id="monitor" class="btn btn-info btn-sm"><i class="fa fa-minus-square-o"></i> 流量监控</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 所有消费组展示 -->
    <div class="panel panel-default" id="groups">
        <div class="panel-heading">当前消费组数:<span></span></div>
        <div class="list-group">
        </div>
    </div>
</div>

<!--设置第三方监控-->
<div class="open-dialog" id="setthirdpart">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3 col-lg-2">监控地址:</label>
            <div class="col-sm-9 col-lg-10">
                <div class="input-group">
                    <span class="input-group-addon">http://</span>
                    <input type="text" class="form-control long-input" name="offsetmonitor" placeholder="offsetmonitor">
                </div>

            </div>
        </div>
    </form>
</div>

<!--新建连接-->
<div class="open-dialog" id="newconn">
    <form class="form-horizontal">
        <div>
            <ul class="nav nav-tabs">
                <li class="active" ><a href="#basic" data-toggle="tab"><i class="fa fa-save"></i> 基础信息</a></li>
                <li class=""  ><a href="#security" data-toggle="tab"><i class="fa fa-pencil"></i> 认证</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="basic">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="control-label col-sm-3 ">连接名:</label>
                                <div class="col-sm-9 ">
                                    <select name="zkConn" id="conns"  class="form-control" ></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3 ">根路径:</label>
                                <div class="col-sm-9 ">
                                    <input type="text" name="chroot" autocomplete="false" spellcheck="false"  class="form-control" placeholder="根路径(默认空)" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3 ">版本:</label>
                                <div class="col-sm-9 ">
                                    <select name="clusterVersion" class="form-control" id="version">
                                        <option value="new">新0.8.1.1</option>
                                        <option value="old">旧0.8.1.1(包含)</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group ">
                                <label for="" class="control-label col-sm-3">sasl.mechanism</label>
                                <div class="col-sm-9">
                                    <input type="text" name="saslMechanism" value="PLAIN" autocomplete="false" spellcheck="false"  class="form-control" placeholder="sasl.mechanism" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane " id="security">
                    <!-- 暂时不做证书认证 -->
                    <div class="panel">
                        <div class="panel-body">
                            <div class="form-group form-group-sm">
                                <label for="" class="control-label col-sm-3">security.protocol</label>
                                <div class="col-sm-9">
                                   <select class="form-control" name="securityProtocol">
                                       <option value="SASL_PLAINTEXT">SASL_PLAINTEXT</option>
                                       <option value="PLAINTEXT">PLAINTEXT</option>
                                       <option value="SSL">SSL</option>
                                       <option value="SASL_SSL">SASL_SSL</option>
                                   </select>
                                </div>
                            </div>
                            <div class="form-group form-group-sm">
                                <label for="" class="control-label col-sm-3">jaas</label>
                                <div class="col-sm-9">
                                    <textarea name="jaasConfig" class="form-control" placeholder="<LoginModule> <controlFlag> <options>"></textarea>
                                </div>

                            </div>
                            <div class="form-group form-group-sm ">
                                <div class="form-group">
                                    <label for="" class="control-label col-sm-3">truststoreLocation: </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="ssl.truststoreLocation" placeholder="truststoreLocation">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label col-sm-3">truststorePassword: </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="ssl.truststorePassword" placeholder="truststorePassword">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label col-sm-3">keystoreLocation: </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="ssl.keystoreLocation" placeholder="keystoreLocation">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label col-sm-3">keystorePassword: </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="ssl.keystorePassword" placeholder="keystorePassword">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label col-sm-3">keyPassword: </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="ssl.keyPassword" placeholder="keyPassword">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 监控数据 -->
<div class="open-dialog" id="brokerMonitor">
    <div class="btn-group btn-group-sm">
        <button name="refresh" class="btn btn-link"><i class="fa fa-refresh"></i></button>
    </div>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>key</th>
            <th>实时比率</th>
            <th>每分钟</th>
            <th>每五分钟</th>
            <th>每十五分钟</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require([ 'bootstrap', 'kafka/groups' ]);
</script>
</body>
</html>